<template>
  <div class="menu-wrapper">
    <el-form
      ref="kitchenForm"
      :model="form"
      label-width="100px"
      style="position: relative"
      :rules="rules"
    >
      <div
        style="
          width: 100%;
          display: flex;
          align-items: flex-end;
          border-bottom: 1px #eee solid;
          margin-bottom: 20px;
        "
      >
        <span style="font-size: 18px; color: #409eff; margin: 10px 0"
          >添加名厨信息</span
        >
      </div>
      <div style="position: absolute; left: 400px; z-index: 999">
        <el-form-item label="厨师头像" prop="avatar">
          <single-upload
            v-model="form.avatar"
            style="display: inline-block; margin-left: 10px"
          />
        </el-form-item>
      </div>
      <el-form-item label="厨师姓名" prop="name">
        <el-col :span="8">
          <el-input v-model="form.name" style="width: 300px" />
        </el-col>
      </el-form-item>

      <div style="display: flex">
        <el-form-item label="所属商户" prop="type">
          <!-- <el-select v-model="form.enterpriseId" placeholder="请选择类型">
            <el-option label="" :value="Number(0)"></el-option>
          </el-select> -->
          <el-select
            v-model="form.enterpriseId"
            placeholder="请选择"
            style="width: 300px"
            @change="change"
          >
            <el-option
              v-for="item in Merchantsoptions"
              :key="item.id"
              :label="item.name"
              :value="item.enterpriseId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>

      <el-form-item label="擅长" prop="beGoodAt">
        <el-col :span="8">
          <el-input v-model="form.beGoodAt" style="width: 300px" />
        </el-col>
      </el-form-item>
      <el-form-item label="星级" prop="difficulty" style="margin-top: 20px">
        <el-col :span="8">
          <el-select
            v-model="form.score"
            clearable
            placeholder="请选择"
            style="width: 300px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>

      <el-row
        style="
          display: flex;
          justify-content: flex-end;
          position: relative;
          margin-left: 90px;
          width: 300px;
        "
      >
        <span
          class="el-icon-plus"
          style="position: absolute; left: -17px; top: 50px; color: #409eff"
          @click="addProduct"
        />
        <el-col :span="23">
          <el-table :data="form.chefMeta" border stripe style="width: 100%">
            <el-table-column label="缩略图" width="80" align="center">
              <template slot-scope="{ row }">
                <single-upload
                  v-model="row.thumbnail"
                  list-type="picture-card"
                />
              </template>
            </el-table-column>

            <el-table-column label="菜名" width="120">
              <template slot-scope="{ row }">
                <el-input v-model="row.name" />
              </template>
            </el-table-column>

            <el-table-column
              fixed="right"
              align="center"
              label="操作"
              width="80"
            >
              <template slot-scope="row">
                <el-tooltip
                  class="item"
                  v-if="row.$index != 0"
                  effect="dark"
                  content="删除"
                  placement="top-start"
                >
                  <a @click="delProduct(row.row.index)">
                    <i style="color: #f56c6c" class="el-icon-delete" />
                  </a>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-form-item label="厨师详情" prop="content">
        <el-col :span="8">
          <div class="el-form-item__content">
            <tinymce v-model="form.content" :height="300" :width="950" />
          </div>
          <!-- <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.content"></el-input> -->
        </el-col>
      </el-form-item>

      <div class="complete">
        <el-form-item>
          <el-button
            type="primary"
            :loading="clicked"
            @click="savekitchen('kitchenForm')"
            >&nbsp&nbsp完 成&nbsp&nbsp</el-button
          >
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<style scoped>
.complete {
  margin-top: 40px;
  margin-left: -60px;
}
.second .el-form-item label {
  margin-top: 40px;
  text-align: left !important;
}
.menu-wrapper {
  margin: 15px;
}
.photo-content {
  width: 100%;
  /* display: flex;
  align-items: flex-end; */
  margin-left: 50px;
  margin-bottom: 40px;
}
.photo-content .photo-content-span {
  margin-bottom: 20px;
}
/deep/.el-upload__tip {
  display: none;
}
/deep/ .el-upload--picture-card {
  width: 50px !important;
  height: 50px !important;
  line-height: 50px !important;
  text-align: center;
}
.video-content {
  margin-left: 40px;
  margin-top: 60px;
  margin-bottom: 40px;
}
.video-content-span {
  margin-bottom: 20px;
}
.secific {
  margin-top: 30px;
}
.el-form-item__content {
  margin-top: 50px;
  margin-left: -50px;
}
</style>
<script>
// import MultiUpload from "@/components/Upload/multiUpload";
// import VideoUpload from "@/components/Upload/videoUpload";
import SingleUpload from "@/components/Upload/singleUpload";
import { mchList } from "@/api/shop";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
import { save } from "@/api/kitchen";
import { list as sysEmployeeList } from "@/api/sysEmployee";
import Tinymce from "@/components/Tinymce"; //编辑器
export default {
  name: "kitchen-add",
  directives: { permission },
  filters: {},
  components: {
    // MultiUpload,
    // VideoUpload,
    SingleUpload,
    Tinymce,
  },
  data() {
    return {
      Merchantsoptions: [],
      options: [
        {
          value: 1,
          label: "1",
        },
        {
          value: 2,
          label: "2",
        },
        {
          value: 3,
          label: "3",
        },
        {
          value: 4,
          label: "4",
        },
        {
          value: 5,
          label: "5",
        },
      ],
      value: "",
      clicked: false, // 按钮防双击
      form: {
        enterpriseId: "",
        id: "",
        avatar: "",
        name: "",
        content: "",
        score: "",
        chefMeta: [
          {
            name: "",
            thumbnail: "",
          },
        ],
      },
      rules: {
        avatar: [
          { required: true, message: "请选择厨师头像", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.Merchants();
  },
  watch: {
    // 路由地址不变的情况下,如果id变化则重新获取数据
    //   $route(newVal, oldVal) {
    //     console.log(newVal);
    //     if (newVal.name == "variety-add" && newVal.query.id != this.id) {
    //       this.getData();
    //     }
    //   },
  },
  methods: {
    change(val) {
      console.log(val);
    },
    Merchants() {
      mchList({
        scopeType:3
      })
        .then((response) => {
          console.log(response);

          this.Merchantsoptions = response.data.data;
          //   console.log(arr);
          //   for (let key in arr) {
          //       this.Merchantsoptions.push(arr[key])

          //   }
          console.log(this.Merchantsoptions);
          //   this.Merchantsoptions
          //      console.log(this.Merchantsoptions);
        })
        .catch((error) => {
          console.log(error);
        });
    },

    addProduct() {
      //    this.length += 1
      var data = {
        name: "",
        thumbnail: "",
      };
      this.form.chefMeta.push(data);
    },
    delProduct(index) {
      this.form.chefMeta.splice(index, 1);
    },
    savekitchen(form) {
      const _this = this;
      this.$refs[form].validate((valid) => {
        if (valid) {
          // 校验表单
          _this.clicked = true;

          console.log(_this.form);
          save(_this.form)
            .then((response) => {
              console.log(response);

              _this.clicked = false;

              EventBus.$emit("kitchen-add", response.data);
              _this.$store
                .dispatch("tagsView/delView", _this.$route)
                .then(({ visitedViews }) => {
                  _this.$router.push({
                    path: "/kitchen/list",
                  });
                }); // 关闭当前tab回到列表
            })
            .catch((error) => {
              _this.clicked = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // saveshop(form){
    //   console.log(this.form);

    // }
  },
};
</script>
